<div #mapViewNode class="esri-view">
  <div class="legend-box">
    <div class="legend-control">
      <i class="ag_remove" [title]="l('pick_up')" [hidden]="!legendShow" (click)="legendShow = !legendShow"></i>
      <i class="ag_web_asset" [title]="l('realation_path')" [hidden]="legendShow"
        (click)="legendShow = !legendShow"></i>
    </div>
    <form nz-form class="ant-advanced-search-form" [hidden]="!legendShow" [formGroup]="validateForm">
      <div nz-row [nzGutter]="24">
        <div nz-col nzLg="24" nzXl="24">
          <nz-form-item nzFlex>
            <nz-form-label nzRequired nzFor="startSiteId">{{l('start_site')}}</nz-form-label>
            <nz-form-control>

              <nz-select formControlName="startSiteId" [ngModel]="model.startSiteId"
                (ngModelChange)="model.startSiteId=$event;getCompanyForStart()"
                [nzPlaceHolder]="l('please_select_start_site')">
                <nz-option *ngFor="let option of bySites" [nzValue]="option.id" [nzLabel]="option.siteName"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzLg="24" nzXl="24">
          <nz-form-item nzFlex>
            <nz-form-label nzFor="startWarehouseId">{{l('start_company')}}</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="startWarehouseId" [(ngModel)]="model.startWarehouseId"
                (ngModelChange)="getPathList()" [nzPlaceHolder]="l('select_start_warehousing_company')">
                <nz-option [nzValue]="''" [nzLabel]="l('select_start_warehousing_company')"></nz-option>
                <nz-option *ngFor="let option of startCompanyList" [nzValue]="option.id" [nzLabel]="option.houseName">
                </nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row [nzGutter]="24">
        <div nz-col nzLg="24" nzXl="24">
          <nz-form-item nzFlex>
            <nz-form-label nzRequired nzFor="endSiteId">{{l('end_site')}}</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="endSiteId" [ngModel]="model.endSiteId"
                (ngModelChange)="model.endSiteId=$event;getCompanyForEnd()"
                [nzPlaceHolder]="l('please_select_end_site')">
                <nz-option *ngFor="let option of sites" [nzValue]="option.id" [nzLabel]="option.siteName"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzLg="24" nzXl="24">
          <nz-form-item nzFlex>
            <nz-form-label nzFor="endWarehouseId">{{l('end_company')}}</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="endWarehouseId" [(ngModel)]="model.endWarehouseId"
                (ngModelChange)="getPathList()" [nzPlaceHolder]="l('select_end_warehousing_company')">
                <nz-option [nzValue]="''" [nzLabel]="l('select_end_warehousing_company')"></nz-option>
                <nz-option *ngFor="let option of endCompanyList" [nzValue]="option.id" [nzLabel]="option.houseName">
                </nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row [nzGutter]="24">
        <div nz-col nzLg="24" nzXl="24">
          <nz-form-item nzFlex>
            <nz-form-label nzRequired nzFor="type">{{l('type')}}</nz-form-label>
            <nz-form-control>
              <nz-radio-group formControlName="type" [(ngModel)]="model.type" (ngModelChange)="pathWay()">
                <label nz-radio [nzDisabled]="disabledSelect && o.value == '2'" [nzValue]="o.value"
                  *ngFor="let o of typeList">{{o.label}}</label>
              </nz-radio-group>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzLg="24" nzXl="24" *ngIf="model.type=='2'">
          <nz-form-item nzFlex>
            <nz-form-label nzRequired nzFor="parentId">{{l('path')}}</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="parentId" [ngModel]="model.parentId"
                (ngModelChange)="model.parentId=$event;getPath()" [nzPlaceHolder]="l('please_select_path')">
                <nz-option *ngFor="let option of pathList" [nzValue]="option.id"
                  [nzLabel]="option.launchTime + '~' +option.arriveTime"></nz-option>
              </nz-select>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row [nzGutter]="24">
        <div nz-col nzLg="24" nzXl="24">
          <nz-form-item nzFlex>
            <nz-form-label nzRequired nzFor="pathNo">{{l('path_no')}}</nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="pathNo" id="pathNo" [(ngModel)]="model.pathNo"
                [placeholder]="l('please_enter_path_no')">
              <nz-form-explain *ngIf="validateForm.get('pathNo').hasError('required')">
                {{l('please_enter_product_name')}}</nz-form-explain>
              <nz-form-explain *ngIf="validateForm.get('pathNo').hasError('maxlength')">
                {{l('please_enter_max_length')}}255</nz-form-explain>
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzLg="24" nzXl="24">
          <nz-form-item nzFlex>
            <nz-form-label nzRequired nzFor="defaultFlag">{{l("default")}}</nz-form-label>
            <nz-form-control>
              <nz-switch [(ngModel)]="model.defaultFlag" formControlName="defaultFlag"></nz-switch>
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
      <div nz-row [nzGutter]="24">
        <div nz-col nzLg="24" nzXl="24" class="control-area">
          <nz-form-item nzFlex>
            <button nz-button [nzType]="'primary'" (click)="ceratePath()">{{l('save')}}</button>
          </nz-form-item>
        </div>
      </div>

    </form>
  </div>
  <div id="topbar" *ngIf="model.type=='1'">
    <button class="action-button esri-icon-polyline" id="polylineButton" type="button"
      [title]="l('draw_polyline')"></button>
    <button class="action-button esri-icon-trash" id="resetBtn" type="button"
      [title]="l('clear_graphics_tooltip')"></button>
  </div>

</div>